<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019/7/5
  Time: 15:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>PDFObject Example: Invoking conditional JavaScript upon successful embed</title>
    <!-- site analytics, unrelated to any example code presented on this page -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-1394306-6"></script>
    <script src="https://pdfobject.com/js/analytics.js"></script><!-- /site analytics -->

    <!--
        This example created for PDFObject.com by Philip Hutchison (www.pipwerks.com)
        Copyright 2016-2018, MIT-style license http://pipwerks.mit-license.org/
        Documentation available at http://pdfobject.com
        Source code available at https://github.com/pipwerks/PDFObject
    -->

    <!-- CSS for basic page styling, not related to example -->
    <link href="https://pdfobject.com/css/examples.css" rel="stylesheet" />

    <style>
        /*
        PDFObject appends the classname "pdfobject-container" to the target element.
        This enables you to style the element differently depending on whether the embed was successful.
        In this example, a successful embed will result in a large box.
        A failed embed will not have dimensions specified, so you don't see an oddly large empty box.
        */

        .pdfobject-container {
            width: 100%;
            max-width: 600px;
            height: 600px;
            margin: 2em 0;
        }

        .pdfobject { border: solid 1px #666; }
        #results { padding: 1rem; }
        .hidden { display: none; }
        .success { color: #4F8A10; background-color: #DFF2BF; }
        .fail { color: #D8000C; background-color: #FFBABA; }
    </style>

</head>

<body>
<h1>PDFObject Example: Invoking conditional JavaScript upon successful embed</h1>

<div id="results" class="hidden"></div>

<div id="pdf"></div>

<div class="pdfobject-com"><a href="http://pdfobject.com">PDFObject.com</a></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js"></script>
<script>

    var options = {
        pdfOpenParams: {
            pagemode: "thumbs",
            navpanes: 0,
            toolbar: 0,
            statusbar: 0,
            view: "FitV"
        }
    };
    if(PDFObject.supportsPDFs){
        console.log("耶，这个浏览器支持内联PDF。");
    } else {
        console.log("BOO，此浏览器不支持内联PDF");
    }

    var myPDF = PDFObject.embed("http://image.bkybk.com/Google-Maps-API-V3.pdf", "#pdf", options);

    var el = document.querySelector("#results");
    el.setAttribute("class", (myPDF) ? "success" : "fail");
    el.innerHTML = (myPDF) ? "PDFObject successfully added an &lt;embed> element to the page!" : "Uh-oh, the embed didn't work.";

</script>

</body>
</html>
